<template>
  <div class="doctor-dashboard">
    <!-- 顶部医生信息 -->
    <div class="header-info">
      <div class="avatar">
        <el-avatar :size="50" src="src\images\u308.jpg" />
      </div>
      <div class="info">
        <div class="name">陈医生</div>
        <div class="role">全科医师 | 海淀区慢病管理团队</div>
      </div>
      <div class="total-patients">
        管理患者数<span class="count">{{ patientList.length }}人</span>
      </div>
    </div>

    <!-- 慢病统计卡片区域 -->
    <div class="disease-cards">
      <!-- 高血压 -->
      <el-card class="card hypertension" shadow="hover">
        <div class="title">高血压患者</div>
        <div class="number">26</div>
        <div class="stats">
          <span class="trend up"><span class="trend-icon">↑</span> 5% 上升</span>
        </div>
      </el-card>

      <!-- 糖尿病 -->
      <el-card class="card diabetes" shadow="hover">
        <div class="title">糖尿病患者</div>
        <div class="number">30</div>
        <div class="stats">
          <span class="trend down"><span class="trend-icon">↓</span> 2% 下降</span>
        </div>
      </el-card>

      <!-- 慢阻肺 -->
      <el-card class="card copd" shadow="hover">
        <div class="title">慢阻肺患者</div>
        <div class="number">28</div>
        <div class="stats">
          <span class="trend up"><span class="trend-icon">↑</span> 3% 上升</span>
        </div>
      </el-card>

      <!-- 脑卒中 -->
      <el-card class="card stroke" shadow="hover">
        <div class="title">脑卒中患者</div>
        <div class="number">18</div>
        <div class="stats">
          <span class="trend"><span class="trend-icon">→</span> 0% 持平</span>
        </div>
      </el-card>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 左侧边栏：待办事项 -->
      <div class="left-sidebar">
        <el-card class="todo-card">
          <div slot="header" class="clearfix">
            <span>待办事项</span>
            <el-button class="view-all-btn" type="text" size="mini">查看全部</el-button>
          </div>
          <!-- 日历组件 -->
          <el-calendar v-model="currentDate">
            <template #date-cell="{ data }">
              <div class="calendar-cell">
                <div>{{ data.day }}</div>
                <!-- 示例：标记15号为当前选中 -->
                <div v-if="data.day === 15" class="selected-day"></div>
              </div>
            </template>
          </el-calendar>

          <!-- 待办列表 -->
          <div class="todo-list">
            <div class="todo-item">
              <el-tag type="success" size="small">待随访</el-tag>
              <span class="patient-name">张晓丽</span>
              <span class="patient-age">男 29岁</span>
              <el-button type="text" size="small">随访</el-button>
              <div class="id-card">身份证号：513030199209090000</div>
            </div>
            <div class="todo-item">
              <el-tag type="success" size="small">待随访</el-tag>
              <span class="patient-name">张天一</span>
              <span class="patient-age">男 29岁</span>
              <el-button type="text" size="small">随访</el-button>
              <div class="id-card">身份证号：513030199209090000</div>
            </div>
            <div class="todo-item">
              <el-tag type="warning" size="small">待复诊</el-tag>
              <span class="patient-name">张天一</span>
              <span class="patient-age">男 29岁</span>
              <el-button type="text" size="small">接诊</el-button>
              <div class="id-card">身份证号：513030199209090000</div>
            </div>
            <div class="todo-item">
              <el-tag type="primary" size="small">待接收</el-tag>
              <span class="patient-name">张天一</span>
              <span class="patient-age">男 29岁</span>
              <el-button type="text" size="small">接收</el-button>
              <div class="id-card">身份证号：513030199209090000</div>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 右侧内容区域 -->
      <div class="right-content">
        <!-- 我的患者表格 -->
        <div class="main-panel">
          <el-card class="patients-card">
            <div slot="header" class="clearfix">
              <span>我的患者</span>
              <el-input
                v-model="search"
                placeholder="请输入患者姓名或ID"
                clearable
                style="width: 240px; float: right;"
                size="small"
              />
            </div>
            <el-table :data="filteredPatientList" style="width: 100%" border>
              <el-table-column prop="name" label="姓名" width="80" />
              <el-table-column prop="gender" label="性别" width="60" />
              <el-table-column prop="age" label="年龄" width="60" />
              <el-table-column prop="idCard" label="身份证号" width="180" />
              <el-table-column prop="phone" label="联系电话" width="120" />
              <el-table-column label="慢病标签" width="120">
                <template #default="scope">
                  <el-tag v-for="tag in scope.row.tags" :key="tag" size="small" :type="getTagType(tag)">
                    {{ tag }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="80">
                <template #default="scope">
                  <el-button type="text" @click="handleManage(scope.row)">管理</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </div>
      </div>

      <!-- 右侧边栏：预警信息和通知公告 -->
      <div class="right-sidebar">
        <!-- 预警信息 -->
        <div class="alert-section">
          <el-card class="alert-card">
            <div slot="header" class="clearfix">
              <span>预警信息</span>
              <el-link type="primary" @click="viewAllAlerts">全部 ></el-link>
            </div>
            <div class="alert-item" v-for="(alert, index) in alertList" :key="index">
              <div class="alert-header">
                <span class="alert-name">{{ alert.name }}</span>
                <span class="alert-gender-age">{{ alert.gender }} {{ alert.age }}岁</span>
              </div>
              <div class="alert-content">
                <span class="warning-text">预警：</span>
                <span>{{ alert.warning }}</span>
              </div>
            </div>
          </el-card>
        </div>

        <!-- 通知公告 -->
        <div class="notice-section">
          <el-card class="notice-card">
            <div slot="header" class="clearfix">
              <span>通知公告</span>
              <el-link type="primary" @click="viewAllNotices">全部 ></el-link>
            </div>
            <div class="notice-item" v-for="(notice, index) in noticeList" :key="index">
              <span>{{ notice.title }}</span>
              <span v-if="notice.isNew" class="new-tag">new</span>
            </div>
          </el-card>
        </div>
      </div>

      <!-- 右侧边栏：通知公告 -->
      <!-- <div class="right-sidebar">
        <el-card class="notice-card">
          <div slot="header" class="clearfix">
            <span>通知公告</span>
            <el-link type="primary" @click="viewAllNotices">全部 ></el-link>
          </div>
          <div class="notice-item" v-for="(notice, index) in noticeList" :key="index">
            <span>{{ notice.title }}</span>
            <span v-if="notice.isNew" class="new-tag">new</span>
          </div>
        </el-card>
      </div> -->
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import router from '@/router'

// 当前日期（用于日历）
const currentDate = ref(new Date())

// 搜索关键词
const search = ref('')

// 患者数据
const patientList = ref([
  { name: '杨景泽', gender: '男', age: 34, idCard: '250019******7623', phone: '1391230000', tags: ['压', '糖', '肺'] },
  { name: '尼京官', gender: '女', age: 20, idCard: '250019******7623', phone: '1391230000', tags: ['压', '糖', '肺'] },
  { name: '藏甜甜', gender: '男', age: 58, idCard: '250019******7623', phone: '1391230000', tags: ['压', '糖', '肺'] },
  { name: '陈琦', gender: '女', age: 86, idCard: '250019******7623', phone: '1391230000', tags: ['压', '糖', '肺'] },
  { name: '刘佳', gender: '男', age: 60, idCard: '250019******7623', phone: '1391230000', tags: ['压', '糖', '肺'] }
])

// 过滤后的患者列表
const filteredPatientList = computed(() => {
  if (!search.value) {
    return patientList.value
  }
  return patientList.value.filter(patient => 
    patient.name.includes(search.value) || 
    patient.idCard.includes(search.value)
  )
})

// 预警信息
const alertList = ref([
  { name: '张晓丽', gender: '男', age: 29, warning: '血压100/180mmHg,空腹血糖10mmol/L' },
  { name: '张晓丽', gender: '男', age: 29, warning: '血压100/180mmHg,空腹血糖10mmol/L' },
  { name: '张晓丽', gender: '男', age: 29, warning: '血压100/180mmHg,空腹血糖10mmol/L' }
])

// 通知公告
const noticeList = ref([
  { title: '关于开展慢病知识培训的通知', isNew: true },
  { title: '关于开展慢病知识培训的通知', isNew: false }
])

// 标签类型映射
const getTagType = (tag) => {
  if (tag === '压') return 'danger'
  if (tag === '糖') return 'warning'
  if (tag === '肺') return 'primary'
  return 'info'
}

// 管理按钮点击事件
const handleManage = (row) => {
  console.log('管理患者:', row)
  // 这里可以跳转到患者详情页或弹窗
  router.push('/ResidentfilesView')
}

// 查看全部预警
const viewAllAlerts = () => {
  console.log('查看全部预警信息')
  // 可跳转到预警列表页
}
</script>

<style scoped>
.doctor-dashboard {
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e6f7ff 100%);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}

/* 医疗主题粒子背景 */
.doctor-dashboard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(79, 172, 254, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 20% 80%, rgba(0, 242, 254, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 80% 30%, rgba(103, 237, 213, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 60% 70%, rgba(123, 226, 247, 0.05) 1px, transparent 1px);
  background-size: 80px 80px, 120px 120px, 100px 100px, 60px 60px;
  animation: particlesMove 20s linear infinite;
  z-index: 0;
}

@keyframes particlesMove {
  0% { background-position: 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 80px 80px, 120px 120px, 100px 100px, 60px 60px; }
}

/* 医疗主题渐变覆盖层 */
.doctor-dashboard::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, 
    rgba(79, 172, 254, 0.03) 0%, 
    rgba(0, 242, 254, 0.03) 25%, 
    rgba(103, 237, 213, 0.03) 50%, 
    rgba(123, 226, 247, 0.03) 75%, 
    rgba(79, 172, 254, 0.03) 100%);
  animation: gradientShift 10s ease infinite;
  z-index: 0;
}

@keyframes gradientShift {
  0% { opacity: 0.1; }
  50% { opacity: 0.2; }
  100% { opacity: 0.1; }
}

.header-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px 25px;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(79, 172, 254, 0.1);
  transition: all 0.3s ease;
  z-index: 1;
}

.header-info:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.header-info::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
}

.avatar {
  margin-right: 20px;
  position: relative;
}

.avatar::after {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  z-index: -1;
  opacity: 0.3;
}

.info .name {
  font-size: 22px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 5px;
  letter-spacing: 0.5px;
}

.info .role {
  font-size: 15px;
  color: #7f8c8d;
  font-weight: 500;
}

.total-patients {
  margin-left: auto;
  font-size: 18px;
  color: #34495e;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  padding: 12px 25px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(79, 172, 254, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 140px;
}

.count {
  font-weight: 800;
  font-size: 24px;
  color: #4facfe;
  margin-top: 5px;
}

.disease-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 25px;
  margin-bottom: 30px;
}

.card {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  padding: 25px 20px;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(79, 172, 254, 0.1);
  transition: all 0.3s ease;
  z-index: 1;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
}

.card.hypertension::before {
  background: linear-gradient(90deg, #ff758c 0%, #ff7eb3 100%);
}

.card.diabetes::before {
  background: linear-gradient(90deg, #43e97b 0%, #38f9d7 100%);
}

.card.copd::before {
  background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
}

.card.stroke::before {
  background: linear-gradient(90deg, #fa709a 0%, #fee140 100%);
}

.card .title {
  margin: 0 0 15px 0;
  font-size: 17px;
  color: #7f8c8d;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.card .number {
  font-size: 32px;
  font-weight: 800;
  color: #2c3e50;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.stats {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  color: #95a5a6;
  font-weight: 500;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.red { background-color: #F56C6C; }
.yellow { background-color: #E6A23C; }
.green { background-color: #67C23A; }

.main-content {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 25px;
  margin-bottom: 30px;
}

.left-sidebar {
  grid-column: 1;
}

.right-content {
  grid-column: 2;
}

.right-sidebar {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.alert-section {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(79, 172, 254, 0.1);
  transition: all 0.3s ease;
  z-index: 1;
  padding: 20px;
}

.alert-section:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.alert-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #ff758c 0%, #ff7eb3 100%);
}

.section-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(79, 172, 254, 0.1);
  transition: all 0.3s ease;
  z-index: 1;
}

.section-card:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.section-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
}

.section-header {
  padding: 20px 25px 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-title {
  font-size: 20px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0;
}

.view-all-btn {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(79, 172, 254, 0.3);
}

.view-all-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(79, 172, 254, 0.4);
}

.section-body {
  padding: 20px 25px;
}

.todo-section {
  grid-column: span 1;
}

.todo-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.todo-item {
  padding: 15px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
}

.todo-item:last-child {
  border-bottom: none;
}

.todo-checkbox {
  margin-right: 15px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #4facfe;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.todo-checkbox.checked {
  background: #4facfe;
  border-color: #4facfe;
}

.todo-checkbox.checked::after {
  content: '✓';
  color: white;
  font-size: 12px;
}

.todo-content {
  flex: 1;
}

.todo-text {
  font-size: 16px;
  color: #34495e;
  margin-bottom: 5px;
}

.todo-meta {
  font-size: 13px;
  color: #95a5a6;
  display: flex;
  align-items: center;
}

.todo-time {
  margin-right: 15px;
}

.calendar-container {
  grid-column: span 1;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.calendar-header h3 {
  margin: 0;
  font-size: 18px;
  color: #2c3e50;
  font-weight: 600;
}

.nav-buttons {
  display: flex;
  gap: 10px;
}

.nav-button {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(79, 172, 254, 0.3);
}

.nav-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(79, 172, 254, 0.4);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.calendar-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  background: rgba(79, 172, 254, 0.05);
}

.calendar-cell:hover {
  background: rgba(79, 172, 254, 0.15);
  transform: scale(1.05);
}

.calendar-cell.empty {
  background: transparent;
  cursor: default;
}

.calendar-cell.today {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(79, 172, 254, 0.3);
}

.calendar-cell.selected-day::after {
  content: '';
  position: absolute;
  bottom: 5px;
  width: 6px;
  height: 6px;
  background: #ff6b6b;
  border-radius: 50%;
}

.weekday-labels {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.weekday-label {
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  color: #7f8c8d;
  padding: 8px 0;
}

.patient-table-section {
  grid-column: span 2;
  margin-top: 0;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-box {
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 20px;
  width: 250px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.search-box:focus {
  outline: none;
  border-color: #4facfe;
  box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.2);
}

.right-column {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.alerts-section, .announcements-section {
  flex: 1;
}

.todo-card {
  margin-bottom: 15px;
}

.calendar-cell {
  position: relative;
  padding: 5px;
  text-align: center;
}

.selected-day {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  background: #409EFF;
  border-radius: 50%;
}

.todo-list {
  margin-top: 15px;
}

.todo-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  gap: 10px;
}

.patient-name {
  font-weight: bold;
}

.patient-age {
  color: #666;
  font-size: 14px;
}

.id-card {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

.patient-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.patient-table th,
.patient-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.patient-table th {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  font-weight: 600;
  color: #495057;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.patient-table tr {
  background: white;
  transition: all 0.3s ease;
}

.patient-table tr:hover {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  transform: scale(1.01);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.patient-table tr:last-child td {
  border-bottom: none;
}

.patient-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 15px;
  object-fit: cover;
  border: 2px solid #4facfe;
}

.patient-info {
  display: flex;
  align-items: center;
}

.patient-name {
  font-weight: 600;
  color: #2c3e50;
}

.patient-age {
  color: #7f8c8d;
  font-size: 14px;
  margin-left: 10px;
}

.tag {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
}

.tag.hypertension {
  background: linear-gradient(135deg, #ff758c 0%, #ff7eb3 100%);
  color: white;
}

.tag.diabetes {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  color: white;
}

.tag.copd {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
}

.tag.stroke {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  color: white;
}

.status-indicator {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 8px;
}

.status-indicator.normal {
  background-color: #4caf50;
}

.status-indicator.warning {
  background-color: #ff9800;
}

.status-indicator.critical {
  background-color: #f44336;
}

.patient-actions {
  display: flex;
  gap: 10px;
}

.action-btn {
  padding: 8px 15px;
  border-radius: 20px;
  border: none;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
}

.manage-btn {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
}

.contact-btn {
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
}

.alerts-list, .announcements-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.alert-item, .announcement-item {
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 15px;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(79, 172, 254, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.alert-item:hover, .announcement-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.alert-item::before, .announcement-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
}

.alert-item::before {
  background: linear-gradient(135deg, #ff758c 0%, #ff7eb3 100%);
}

.announcement-item::before {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.alert-item .alert-header,
.announcement-item .announcement-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.alert-item .alert-title,
.announcement-item .announcement-title {
  font-weight: 700;
  color: #2c3e50;
  font-size: 16px;
  display: flex;
  align-items: center;
}

.alert-icon, .announcement-icon {
  margin-right: 10px;
  font-size: 18px;
}

.alert-icon {
  color: #ff6b6b;
}

.announcement-icon {
  color: #4facfe;
}

.alert-item .alert-time,
.announcement-item .announcement-time {
  font-size: 13px;
  color: #95a5a6;
  background: #f8f9fa;
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 500;
}

.alert-item .alert-content,
.announcement-item .announcement-content {
  font-size: 15px;
  color: #7f8c8d;
  line-height: 1.6;
  margin-bottom: 15px;
}

.alert-item .alert-patient,
.announcement-item .announcement-author {
  font-size: 14px;
  color: #4facfe;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.patient-icon, .author-icon {
  margin-right: 8px;
  font-size: 16px;
}

.priority-high {
  border-left: 4px solid #ff6b6b;
}

.priority-medium {
  border-left: 4px solid #ffa500;
}

.priority-low {
  border-left: 4px solid #4facfe;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .disease-cards {
    flex-wrap: wrap;
  }
  .card {
    min-width: 200px;
  }
  .main-content {
    flex-direction: column;
  }
  .sidebar,
  .right-sidebar {
    width: 100%;
  }
}
</style>